<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <!-- jquery -->
        <script src="/libs/jquery/jquery-1.11.1.min.js"></script>
        
        <!-- http插件 -->
        <script src="/libs/http/axios.min.js"></script>
        
        <!-- 弹窗插件 -->
        <link rel="stylesheet" type="text/css" href="/lianxijs/libs/sweetalert/sweetalert.css"  />
        <script src="/libs/sweetalert/sweetalert-dev.js"></script>
        
        <!-- 时间格式化插件 -->
        <script src="/libs/moment/moment.min.js"></script>   
        
        <!-- 精确计算插件 -->
        <!-- <script src="/libs/number-precision/index.iife.js"></script> -->
        <script src="/libs/number-precision/index.umd.js"></script>
        
        <!-- 带搜索的下拉框 -->
        <link rel="stylesheet" type="text/css" href="/lianxijs/libs/select2/select2.css"/>
        <script src="/libs/select2/select2.js"></script>
        
        <!-- base64插件（https://github.com/dankogai/js-base64） -->
        <script src="/libs/base64/base64.min.js"></script>
        
    </head>
    <body>
        <div>
            选择图片文件并预览：<input type="file" id="file" onchange="viewImg()" accept="image/*"/>
        </div>
        <br/>
        <div>
            <img id="img"/>
        </div>
            
    </body>
</html>
<script>
    let viewImg = function () {
        let files = $("#file")[0]['files'];
        // input 无文件，则删除预览
        if (files.length === 0) {
            $("#img").removeAttr("src");
            return;
        }
        // input 有图片，则预览
        let blobUrl = window.URL.createObjectURL(files[0]);
        console.log(blobUrl);
        $("#img").attr("src", blobUrl);
    };
</script>